<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <title>{{.name}}- {{.id}}</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
</head>

<body>

    <div class="container" id="app">
        <div class="text-justify container text-secondary">
            <div class="col-sm-10 ">
                <h3>${room_name} - ${room_id} <span style="float: right"><a href="/api/room/room-page">返回聊天室列表</a></span></h3>
                <div class="panel panel-default panel-body box-show" id="messages" style="height: 600px;overflow:auto;">
                    <div v-for="log in log_list">
                        <div class="panel panel-default panel-body box-show" style="font-size: 20px" v-if="log.type == 1" >
                            <div class="col-sm-4" style="text-align: right"><span style="color: #2e6da4;font-weight: bold">${log.user_name}</span> 说：</div>
                            <div class="col-sm-5">${log.content} </div>
                            <div class="col-sm-3" style="font-size: 10px;text-align: right;line-height: 10px"><br/>${log.create_time}</div>
                        </div>
                        <p style="text-align: center;color: RGB(43,162,69)" v-else >${log.user_name} ${log.content} ${log.create_time}</p>
                    </div>
                </div>

                <form role="form">
                    <div class="form-group">
                        <textarea class="form-control " rows="3"  v-model="send_msg"></textarea>
                    </div>
                    <a class="btn btn-default" v-on:click="sendMessage">发送</a> <span @keyup.ctrl.enter="sendMessage">Ctrl + Enter 快捷发送</span>
                </form>
            </div>
            <div class="col-sm-2 ">
                <h3>聊天室人数： <span id="user_num"> </span></h3>
                <div class="panel panel-default panel-body box-show" id="users">
                    <p v-for="user in user_list">${user.name}</p>
                </div>
            </div>
        </div>
    </div>
</body>
<style type="text/css">
.tkfx {
    position: absolute;
    transform: rotate(-90deg);
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

<script type="text/javascript">

    // 房间ID
    var id = {{.id}}
    // 房间名称
    var name = {{.name}}
    // 用户ID
    var token = {{.token}}

    var ws = new WebSocket("ws://192.168.11.213:8080/socket/web/connect/" + token);

    //接收到消息时触发
    ws.onmessage = function (evt) {
        var data = JSON.parse(evt.data)
        if (data.type != 1){
            v.getInfo()
        }

        v.$data.log_list.push({
            user_name: data.user_name,
            content: data.content,
            type:data.type,
            create_time: data.create_time,
        })

    }

    //连接关闭时触发
    ws.onclose = function(evt) {};

    v = new Vue({
        el : "#app",
        delimiters: ['${', '}'],
        data:{
                room_id : {{.id}},
                room_name : {{.name}},
                token : {{.token}},
                user_list : [],
                log_list :[],
                room_info:{},
                send_msg:"",
        },
        mounted() {
            this.getInfo()
        },
        methods: {
            getInfo : function () {
                let _this = this;
                axios.get('/api/room/room-info?room_id=' + _this.room_id).then(function (response) {
                    if (response.data.code == 0){
                        _this.user_list = response.data.data.user_list;
                        _this.log_list = response.data.data.log_list;
                        _this.room_info = response.data.data.room_info;
                    }else{
                        console.log(response)
                    }
                }).catch(function (error) { // 请求失败处理
                    console.log(error);
                });
            },
            sendMessage : function () {
                ws.send(this.send_msg);
                this.log_list.push({
                    user_name: "我",
                    content: this.send_msg,
                    type:1,
                    create_time: (new Date()).toLocaleString(),
                    id : 0,
                });
                this.send_msg = "";
            }
        }
    })
</script>

</html>